<template>
  <div class="plus-container">
    <div class="header-search-container">
      <div class="search-box" @click="$router.push('/classificationsearch')">
        <span class="icon"></span>
        <span class="search-content">搜索菜谱</span>
      </div>
    </div>
    <div class="foot-box" v-for="item in footstyle" :key="item.__ob__.dep.id">
      <h2>{{ item.name }}</h2>
      <ul class="foot-list">
        <li class="foot-item" v-for="value in item.list" :key="value.id" @click="$router.push({ path: `/evertfoot/${value.id}`, query: { title: value.name } })">
          <div class="foot-pic">
            <img :src="`http://pic.angelboy.cn/web/${value.imageid}.jpg`" />
            <span class="foot-name">{{ value.name }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request/request'
export default {
  data() {
    return {
      footstyle: [],
      footimg: []
    }
  },
  methods: {
    async requestDailyRecommend() {
      const {
        data: { list }
      } = await request({
        url: '/public/getRecipeHomeData.shtml',
        method: 'post'
      })
      this.footstyle = list

      list.forEach((value) => {
        value.list.forEach((img) => {
          this.footimg.push(`http://pic.angelboy.cn/web/${img.id}.jpg`)
        })
      })
    }
  },
  created() {
    this.requestDailyRecommend()
  }
}
</script>

<style lang="less" scoped>
.plus-container {
  padding-top: 46px;

  .header-search-container {
    height: 45px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: white;

    .search-box {
      height: 30px;
      width: 100%;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #bfbfbf;
      background-color: #f7f7f7;

      .icon {
        height: 14px;
        width: 14px;
        margin-right: 10px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url('@/assets/home/ic_search.png');
      }

      &:active .search {
        color: #727272;
      }

      &:active .search-content {
        color: #727272;
      }
    }
  }

  .foot-box {
    padding: 0 10px;

    h2 {
      text-align: center;
      padding: 10px 0;
      font-weight: 600;
      font-size: 15px;
      // background-color: red;
    }
    .foot-list {
      padding: 0 5px;
      display: flex;
      flex-wrap: wrap;

      .foot-item {
        min-height: 90px;
        width: 25%;
        padding: 0 5px 10px;
        box-sizing: border-box;

        .foot-pic {
          position: relative;
          img {
            width: 100%;
            height: auto;
          }

          span {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 100%;
            line-height: 24px;
            text-align: center;
            color: #fff;
            padding-bottom: 3px;
            transform: translateX(-50%);
            background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
          }
        }
      }
    }
  }
}
</style>
